<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">

				<el-form-item>
					<el-input v-model="filters.accountName" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.phoneNum" placeholder="手机号码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="findPageAccount">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="handleAdd">新增</el-button>
				</el-form-item>
				<el-form-item >
					<el-tag   >{{filters.balance}}</el-tag>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"    v-on:click="getRefreshTop">查询余额/刷新</el-button>
				</el-form-item>
				<el-form-item >
					<el-tag   >{{filters.status}}</el-tag>
				</el-form-item>
				<!--<el-form-item>-->
				<!--<el-button type="primary"    v-on:click="logout">退出登录</el-button>-->
				<!--</el-form-item>-->
			</el-form>
		</el-col>
		<!--列表-->
		<template>
			<el-table :data="accounts" highlight-current-row v-loading="loading" border max-height="620" style="width: 100%;">
				<el-table-column type="index" width="80" label="编号">
				</el-table-column>
				<el-table-column prop="comName" label="公司名称" show-overflow-tooltip  width="220px" >
				</el-table-column>
				<el-table-column prop="city" label="地市" show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="accountName" label="用户名" show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="phoneNum" label="手机号码" show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="password" label="登录密码"   show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="payPassword" label="支付密码"     show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="balance" label="账户余额"    show-overflow-tooltip  >
				</el-table-column>
				<el-table-column prop="accstate" label="状态" :formatter="formatStatus" >
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间"  width="180px"  >
				</el-table-column>

				<el-table-column label="操作"    width="320">
					<template scope="scope"   >
						<el-button size="small" v-show="isShowSupper"  @click="handleEdit(scope.$index, scope.row)">
							编辑
						</el-button>
						<el-button size="small"   @click="handleEnable(scope.$index, scope.row)">
							{{scope.row.accstate == 0 ? '启用' : '禁用'}}
						</el-button>
						<el-button size="small"   @click="handleLogin(scope.$index, scope.row)">
							登录
						</el-button>
						<el-button size="small"   @click="getRefreshTop(scope.$index, scope.row)">
							刷新/查询余额
						</el-button>

					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				layout="total,sizes,prev, pager, next"
				:total="total">
		</el-pagination>
		<!--新增界面-->
		<el-dialog title="新增充值账号"  width="30%" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="公司名称" prop="comName">
					<el-input v-model="addForm.comName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="地市" prop="city">
					<el-input v-model="addForm.city" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="accountName">
					<el-input v-model="addForm.accountName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phoneNum">
					<el-input v-model="addForm.phoneNum" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="addForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付密码" prop="payPassword">
					<el-input v-model="addForm.payPassword" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑充值账号"  width="30%" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="公司名称" prop="comName">
					<el-input v-model="editForm.comName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="地市" prop="city">
					<el-input v-model="editForm.city" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="accountName">
					<el-input v-model="editForm.accountName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phoneNum">
					<el-input v-model="editForm.phoneNum" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="editForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付密码" prop="payPassword">
					<el-input v-model="editForm.payPassword" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="登录移动系统"  width="20%" v-model="loginFormVisible" :close-on-click-modal="false">
			<el-form :model="loginForm" label-width="100px" :rules="loginFormRules" ref="loginForm"  :inline="true">
				<el-form-item label="公司名称" prop="comName">
					<el-input v-model="loginForm.comName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="accountName">
					<el-input v-model="loginForm.accountName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="loginForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="验证码" prop="rand" >
					<el-row :gutter="10">
						<el-col :lg="10" >
							<el-input v-model="loginForm.rand" auto-complete="off"></el-input>
						</el-col>
						<el-col  :lg="8"  >
							<img  :src='loginUrl' alt="" style="width: 85px;height: 25px">
						</el-col>
						<el-col  :lg="3"  >
							<el-button @click.native="getRand(loginForm)">刷新</el-button>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item label="短信验证码" prop="msgRand">
					<el-row :gutter="10">
						<el-col :lg="10" >
							<el-input v-model="loginForm.msgRand" auto-complete="off"></el-input>
						</el-col>
						<el-col  :lg="8"  >
							<el-button @click.native="getCodeFun">{{getCode}}</el-button>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="loginFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="loginSubmit" :loading="loginLoading">登录</el-button>
			</div>
		</el-dialog>
	</section>

</template>
<!--<rsa src="http://211.139.145.140:9080/eucp/scripts/security.js"></rsa>-->
<script>
	import { findPageAccount ,saveAccount,updateAccstate,updateAccount,getRand,getMsgRand,loginEle,getRefreshTop,logout} from '../../api/api';
	//    import $ from 'jquery';
	import RSAUtils from '../../common/security'
	var crypto = require('crypto');
	export default {
		data() {
			return {
				filters: {
					accountName: '',
					phoneNum:'',
					balance:'0.00',
					status:'未登录'
				},
				isShowSupper:JSON.parse(sessionStorage.getItem("user")).usertype === 2 ? true : false,
				start:0,
				pageSize:10,
				total:0,
				getCode:'获取验证码',
				loading: false,
				accounts: [],
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					accountName: [
						{ required: true, message: '请输入登陆账号', trigger: 'blur' },
					],
					password:[
						{ required: true, message: '请输入登陆密码', trigger: 'blur' }
					],
					payPassword:[
						{ required: true, message: '请输入支付密码', trigger: 'blur' }
					],
					phoneNum:[
						{ required: true, message: '请输入账号电话', trigger: 'blur' }
					],
					comName:[
						{ required: true, message: '请输入公司名称', trigger: 'blur' }
					],city:[
						{ required: true, message: '请输入地市', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					accountName: '',
					password: '',
					payPassword: '',
					phoneNum: '',
					comName:'',
					city:''
				},

				editFormVisible: false,
				editLoading: false,
				editFormRules: {
					accountName: [
						{ required: true, message: '请输入登陆账号', trigger: 'blur' },
					],
					password:[
						{ required: true, message: '请输入登陆密码', trigger: 'blur' }
					],
					payPassword:[
						{ required: true, message: '请输入支付密码', trigger: 'blur' }
					],
					phoneNum:[
						{ required: true, message: '请输入账号电话', trigger: 'blur' }
					],comName:[
						{ required: true, message: '请输入公司名称', trigger: 'blur' }
					],city:[
						{ required: true, message: '请输入地市', trigger: 'blur' }
					]
				},
				editForm: {
					accountName: '',
					password: '',
					payPassword: '',
					phoneNum: '',
					comName:'',
					city:''
				},

				loginFormVisible: false,
				loginLoading: false,
				loginFormRules: {
					accountName: [
						{ required: true, message: '请输入登陆账号', trigger: 'blur' },
					],
					password:[
						{ required: true, message: '请输入登陆密码', trigger: 'blur' }
					],
					rand:[
						{ required: true, message: '请输入验证码', trigger: 'blur' }
					],
					msgRand:[
						{ required: true, message: '请输入短信验证码', trigger: 'blur' }
					],
				},
				loginForm: {
					accountName: '',
					password: '',
					rand: '',
					msgRand: '',
					accId:'',
					comName:''
				},
				loginUrl:'',
				modulus:''
			}
		},
		methods: {
			formatStatus: function (row, column) {
				return row.accstate === 1 ? '使用中' : row.accstate === 0 ? '禁用' : row.accstate === 2  ? "登录成功" : "其他";
			},
			handleAdd:function(){
				this.addFormVisible = true;
			},
			addSubmit:function(){
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = Object.assign({}, this.addForm);
							saveAccount(para).then((datas) => {
								this.addLoading = false;
								let { message, code, data } = datas;
								if (code !== "0") {
									this.$message({
										message: message,
										type: 'error'
									});
								}
								this.findPageAccount();
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
							}).catch(function (error) {
								console.log(error);
								this.addLoading = false;
							});
						});
					}
				});
			},
			findPageAccount: function () {
				let para = {
					accountName: this.filters.accountName,
					start:this.start,
					pageSize:this.pageSize,
					phoneNum:this.filters.phoneNum
				};
				// this.loading = true;
				// findPageAccount(para).then(datas => {
				// 	this.loading = false;
				// 	//NProgress.done();
				// 	let { message, code, data } = datas;
				// 	if (code !== "0") {
				// 		this.$message({
				// 			message: message,
				// 			type: 'error'
				// 		});
				// 	} else {
				// 		this.accounts = data.result;
				// 		this.total = data.totalCount;
				// 	}
				// }).catch(e =>{
				//
				// });
			},handleCurrentChange:function(val){
				this.start = val - 1;
				this.findPageAccount();
			},
			handleSizeChange:function(val){
				this.pageSize = val;
				this.findPageAccount();
			} ,handleEdit:function(index, row){
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},editSubmit(){
				let para = Object.assign({}, this.editForm);
				this.$confirm('确认编辑该账号信息吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.editFormVisible = true;
					updateAccount(para).then((res) => {
						this.editFormVisible = false;
						let { message, code, data } = res;
						if (code !== "0") {
							this.$message({
								message: message,
								type: 'error'
							});
						} else {
							this.$message({
								message: '操作成功',
								type: 'success'
							});
						}
						this.findPageAccount();
					});
				}).catch(() => {

				});
			},handleEnable: function (index, row) {
				this.$confirm('确认更新该账号状态吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						accstate: row.accstate == "0" ? "1" : "0",
						accId: row.accId
					};
					updateAccstate(para).then((res) => {
						this.listLoading = false;
						let { message, code, data } = res;
						if (code !== "0") {
							this.$message({
								message: message,
								type: 'error'
							});
						} else {
							this.$message({
								message: '操作成功',
								type: 'success'
							});
						}
						this.findPageAccount();
					});
				}).catch(() => {

				});
			},handleLogin: function (index, row) {
				this.loginFormVisible = true;
				this.loginForm = Object.assign({}, row);
				this.getRand(this.loginForm);
			},getCodeFun:function () {
				if(this.modulus != null && this.modulus != ""){
					//rsa加密
					var rsa = RSAUtils.RSAUtils;
					rsa.setMaxDigits(200);
					var key = rsa.getKeyPair("10001", "", this.modulus);
					let para = Object.assign({}, this.loginForm);
					para.account = para.accountName;
					para.accountName = rsa.encryptedString(key,para.accountName);
					para.password =  rsa.encryptedString(key,para.password);
					para.rand =  rsa.encryptedString(key,para.rand) ;
					getMsgRand(para).then((res) => {
						this.listLoading = false;
						let { message, code, data } = res;
						if (code !== "0") {
							this.$message({
								message: message,
								type: 'error'
							});
						} else {

							//获取成功后在调用一次图片验证码
							this.getRand(this.loginForm);
							this.$message({
								message: "获取短信验证码成功,如未收到验证码,请于一分钟之后重发",
								type: 'info'
							});
						}
					});
				}else{
					this.$message({
						message: "请刷新后尝试",
						type: 'error'
					});
				}
			},getRand:function(para){
				getRand(para).then((res) => {
					this.listLoading = false;
					let { message, code, data } = res;
					if (code !== "0") {
						this.$message({
							message: message,
							type: 'error'
						});
					} else {
						this.loginForm.rand = "";
						this.loginUrl = data.rand;
						this.modulus = data.modulus;
					}
				});
			},loginSubmit:function () {
				if(this.modulus != null && this.modulus != ""){
					//rsa加密
					var rsa = RSAUtils.RSAUtils;
					rsa.setMaxDigits(200);
					var key = rsa.getKeyPair("10001", "", this.modulus);
					let para = Object.assign({}, this.loginForm);
					para.accountName = rsa.encryptedString(key,para.accountName);
					para.password =  rsa.encryptedString(key,para.password);
					para.rand =  rsa.encryptedString(key,para.rand) ;
					para.msgRand =  rsa.encryptedString(key,para.msgRand) ;
					loginEle(para).then((res) => {
						this.listLoading = false;
						let { message, code, data } = res;
						if (code !== "0") {
							this.$message({
								message: message,
								type: 'error'
							});
						} else {
							this.$message({
								message: "登录成功",
								type: 'info'
							});
							this.loginFormVisible = false;
						}
					});
				}else{
					this.$message({
						message: "请刷新后尝试",
						type: 'error'
					});
				}
			},getRefreshTop:function(index, row){
				let para = {upshopuuid:"",querySwitch:""}
				getRefreshTop(para).then((res) => {
					this.listLoading = false;
					let { message, code, data } = res;
					if (code !== "0") {
						this.$message({
							message: message,
							type: 'error'
						});
					} else {
						this.$message({
							message: "刷新成功",
							type: 'info'
						});
						// this.filters.balance = data.balance == "" ? "查询失败,请登录账号后查询" : data.balance;
						// this.filters.status = data.status == "1" ? "使用中/未登录" : data.status == "2" ? "已登录" : "未登录或者登录失效";
						this.filters.balance = data == "" ? "未登陆" : data;
						this.filters.status = data != "" ? "已登录" : "未登陆";
					}
				});
			},logout:function () {
				let para = {test:''}
				logout(para).then((res) => {
					this.listLoading = false;
					let { message, code, data } = res;
					if (code !== "0") {
						this.$message({
							message: message,
							type: 'error'
						});
					} else {
						this.$message({
							message: "退出成功",
							type: 'info'
						});
						this.getRefreshTop();
					}
				});
			}
		},

		mounted() {
			this.findPageAccount();
			this.getRefreshTop();
		},
		beforeCreate: function (){
//            window.location.reload();
		}
	};

</script>

<style scoped>

</style>
